<template>
  <div v-if="showDialog" class="festival-container">
    <div class="festival-box">
      <div class="close pointer" @click="handleClose">
        <img src="../../assets/closetwo.png" alt="" class="icon-close" />
      </div>
      <img src="../../assets/dialog/newyear/icon-1.png" alt="" class="icon-1" />
      <img src="../../assets/dialog/newyear/icon-2.png" alt="" class="icon-2" />
      <div class="festival-wrap">
        <div class="title mg-b-7">
          关于发薪
        </div>
        <div class="p1 mg-b-7">
          尊敬的用户，您好！受央行大额支付系统影响,“对公充值”将在2024年元旦期间部分时间段关闭运行
        </div>
        <div class="p2 bold">
          具体时间安排如下：
        </div>
        <div class="p3 bold">
          <text class="fc-red">2023年12月29日 17:15 - 1月1日24:00</text
          ><text class="p1">为关闭时间；</text>
          <text class="fc-red">2024年1月2日 00:00</text
          ><text class="p1"> 恢复正常充值；</text>
        </div>
        <div class="p1">后续其余时间段与常规状态一致。</div>
        <div class="p1 border">
          请提前充值做好工资备款，避免中途账户余额不足。“公对公充值”关闭时间段，法人可以在小程序中使用管理员个人充值<text
            class="bold"
            >请合理安排发薪专户的转账充值,以免影响假期使用。</text
          >
        </div>
        <div class="p4 mg-t-10">
          注意：以上时间仅针对于公对公充值，期间发薪系统正常运营
        </div>
        <div class="title mg-b-7 mg-t-10">
          关于保险
        </div>
        <div class="p1 dot fs-14">
          · 系统正常操作加减保，<text class="bold"
            >日日保投保时间不受影响。</text
          >
        </div>
        <div class="p1 dot fs-14">
          ·
          为了避免影响您的加减保操作，建议您假期前可以多充值部分保费(用不完可以退回)保证账户余额充足，以供假期时间使用。
        </div>
        <div class="p1 dot fs-14">
          ·
          在线报案功能不受影响，系统都可操作(24小时之内系统操作在线报案)，上班之后理赔老师第一时间受理哦。
        </div>
        <div class="p4 text-center mg-t-10">
          注意:如有其他问题咨询，请联系您的业务经理或服务群内沟通，都会第一时间给您处理的
        </div>
      </div>
      <div class="p5 text-center">
        子弹人力云全体员工祝您：假期愉快!
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showDialog: true
    };
  },
  watch: {
    show: {
      handler(newval) {
        this.showDialog = newval;
      },
      immediate: true
    },
    showDialog(newval) {
      this.$emit("update:show", newval);
    }
  },
  methods: {
    handleClose() {
      sessionStorage.setItem("showNewYear", true);
      this.showDialog = false;
    }
  }
};
</script>
<style lang="stylus" scoped>
.festival-container
    position fixed
    left 0
    top 0
    width 100%
    height 100%
    background rgba(0, 0, 0, 0.7)
    z-index 100
    color #261005
    font-size 15px
.festival-box
    width 773px
    height auto
    background url('../../assets/dialog/newyear/bg.png') no-repeat
    position absolute
    left 50%
    top 50%
    transform translate(-50%, -50%)
    padding 168px 28px 0
    box-sizing initial
    background-size 100% 100%
.icon-1
    width 180px
    height 239px
    position absolute
    right 185px
    top -40px
.icon-2
    width 102px
    height 100px
    position absolute
    left -28px
    bottom -40px
.festival-wrap
    border-radius 20px
    background-color #FADDC8
    padding 11px 18px
    width 735px
    box-sizing initial
.title
    background linear-gradient(180deg, #FC7F5B 0%, #B93F1C 100%)
    height 20px
    line-height 20px
    color #fff
    border-radius 10px
    font-size 12px
    display inline-block
    padding 0 10px
    font-weight bold
.icon-img
    width 164px
    height 43px
.festivel-content
    width 728px
    height 394px
    background #fff
    border-radius 20px
    margin-top 150px
    margin-left 24px
    padding 2px 18px
.fc-red
    color #B93F1C
.fc-pink
    color #FF5347
.dash-border
    border-top 1px dashed #B2B2B2
    padding-top 8px
    margin-top 8px
.icon-close
    position absolute
    right 0
    top -22px
    width 36px
    height 36px
.mg-b-7
    margin-bottom 5px
.border
    border-top 1px dashed #B2B2B2
    padding-top 6px
    margin-top 10px
.p4
    color rgba(38, 16, 5, 0.6)
    font-size 13px
.p5
    color #F2D4A2
    font-size 13px
    letter-spacing 0.5em
    padding 12px 0
.dot
    line-height 24px
</style>
